<template>
  <div class="custom-block">
    <div v-for="color in Object.keys(colors)" :key="color" class="grid grid-cols-10 gap-4">
      <h4 class="w-full capitalize col-span-10 mt-8 text-xl">{{ color }}</h4>
      <ColorPaletteBlock
        v-for="shade in Object.keys(colors[color])"
        :key="shade"
        class="col-span-5 md:col-span-3 xl:col-span-2"
        :oklch-color="colors[color][shade]"
        :shade="shade"
        :name="`${color}-${shade}`"
      />
    </div>
  </div>
</template>

<script>
import ColorPaletteBlock from './ColorPaletteBlock.vue';
// copied over from: packages/config/tailwind/config.css
const colors = {
  primary: {
    '50': '0.980165 0.0205041 156.723',
    '100': '0.944598 0.0280714 162.014',
    '200': '0.886553 0.0466985 164.989',
    '300': '0.803863 0.0615073 163.433',
    '400': '0.726997 0.0544955 162.973',
    '500': '0.63414 0.0482896 162.927',
    '600': '0.524633 0.0411815 162.014',
    '700': '0.465676 0.0347951 162.989',
    '800': '0.365357 0.025772 164.59',
    '900': '0.269551 0.0167404 163.37',
  },
  secondary: {
    '50': '0.981772 0.0270107 157.305',
    '100': '0.961651 0.0499168 155.006',
    '200': '0.898695 0.0969988 153.575',
    '300': '0.854662 0.144278 151.034',
    '400': '0.800846 0.196195 150.809',
    '500': '0.716132 0.190176 150.725',
    '600': '0.620991 0.164907 151.143',
    '700': '0.523649 0.13546 151.384',
    '800': '0.40077 0.0945497 152.915',
    '900': '0.285096 0.0548596 155.371',
  },
  positive: {
    '50': '0.981772 0.0270107 157.305',
    '100': '0.961651 0.0499168 155.006',
    '200': '0.898695 0.0969988 153.575',
    '300': '0.854662 0.144278 151.034',
    '400': '0.800846 0.196195 150.809',
    '500': '0.716132 0.190176 150.725',
    '600': '0.620991 0.164907 151.143',
    '700': '0.523649 0.13546 151.384',
    '800': '0.40077 0.0945497 152.915',
    '900': '0.285096 0.0548596 155.371',
  },
  negative: {
    '50': '0.97842 0.0110926 3.58502',
    '100': '0.950811 0.0259569 2.81641',
    '200': '0.905643 0.0492912 5.57236',
    '300': '0.867244 0.0697169 8.61502',
    '400': '0.810255 0.109846 11.3178',
    '500': '0.746364 0.15595 13.8107',
    '600': '0.634433 0.215119 16.4453',
    '700': '0.544879 0.214877 22.1307',
    '800': '0.410286 0.159974 20.8879',
    '900': '0.279959 0.0904061 18.1682',
  },
  warning: {
    '50': '0.978524 0.0163972 79.1756',
    '100': '0.960444 0.0366282 80.5214',
    '200': '0.910044 0.079927 79.3929',
    '300': '0.869878 0.105541 73.91',
    '400': '0.824998 0.145165 72.2519',
    '500': '0.750127 0.160009 70.0833',
    '600': '0.63565 0.134731 68.4887',
    '700': '0.538932 0.120035 64.8673',
    '800': '0.414554 0.0894398 62.9947',
    '900': '0.286053 0.0552756 60.0771',
  },
  neutral: {
    '50': '0.986252 0.00245284 164.375',
    '100': '0.962452 0.00658519 159.784',
    '200': '0.90417 0.0125382 156.831',
    '300': '0.815695 0.0163149 154.295',
    '400': '0.62887 0.0164423 157.928',
    '500': '0.530109 0.017136 157.798',
    '600': '0.442872 0.016032 152.177',
    '700': '0.364935 0.0156449 156.31',
    '800': '0.281681 0.0111333 156.387',
    '900': '0.210975 0.0108426 151.158',
  },
  disabled: {
    '50': '0.986252 0.00245284 164.375 / 0.5',
    '100': '0.962452 0.00658519 159.784 / 0.5',
    '200': '0.90417 0.0125382 156.831 / 0.5',
    '300': '0.815695 0.0163149 154.295 / 0.5',
    '400': '0.62887 0.0164423 157.928 / 0.5',
    '500': '0.530109 0.017136 157.798 / 0.5',
    '600': '0.442872 0.016032 152.177 / 0.5',
    '700': '0.364935 0.0156449 156.31 / 0.5',
    '800': '0.281681 0.0111333 156.387 / 0.5',
    '900': '0.210975 0.0108426 151.158 / 0.5',
  },
};
export default {
  components: {
    ColorPaletteBlock,
  },
  data() {
    return {
      colors,
    };
  },
};
</script>
